import React from 'react';
import PropTypes from 'prop-types';
import { Row, Col, Form, Input, Button, Select } from 'antd';
import { getPath } from '../../utils';
import './index.less';
import './main-content.less';
import moment from 'moment';
const FormItem = Form.Item;
const Option = Select.Option;
const formItemLayout = {
  labelCol: {
    span:7
  },
  wrapperCol: {
    span: 15
  }
};
const formItemLayout1 = {
  labelCol: {
    span: 10
  },
  wrapperCol: {
    span: 14
  }
};

function gotoLink(link, router) {
  router.push(link);
}
const list = ({ router, form, submit }) => {
  const { getFieldDecorator } = form;
  return (
    <div className="table-wrap list-wrap">
      <p className="title">家畜屠宰记录</p>
      <div className="main-table">
        <Row>
          <Col span={5}>
            <FormItem label="屠宰员" {...formItemLayout}>
              {getFieldDecorator('kName', {
                initialValue: 'Tom'
              })(<Input disabled={true} />)}
            </FormItem>
          </Col>
          <Col span={7}>
            <FormItem label="屠宰时间" {...formItemLayout}>
              {getFieldDecorator('kFattenedTime', {
                initialValue: moment().format('YYYY-MM-DD HH:mm:ss')
              })(<Input disabled={true} />)}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem label="地理位置" labelCol={{xxl:{span:7},xl:{span:8}}} wrapperCol={{xxl:{span:17},xl:{span:15}}}>
              {getFieldDecorator('mapPosition', {
                initialValue: '106.215941,37.992396'
              })(<Input disabled={true} />)}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem label="屠宰过程" {...formItemLayout1}>
              {getFieldDecorator('killFunction', {
                initialValue: 'Qualified'
              })(<Select>
                <Option value='Qualified' key='1'>Qualified</Option>
              </Select>)}
            </FormItem>
          </Col>
        </Row>
        <div className="img-content-wrap">
          <div className="img-content-1">
          
            <div className="img-wrap">
              <img className="img" src={getPath('/img/img-1.jpg')} />
              <img className="img" src={getPath('/img/img-2.jpg')} />
            </div>
          </div>
          <div className="img-content-2">
            <div className="img-wrap">
              <img className="img" src={getPath('/img/img-3.jpeg')} />
              <img className="img" src={getPath('/img/img-2.png')} />
            </div>
          </div>
        </div>
        <div className="btn-wrap">
          <Button onClick={() => submit()} className="slaughter-btn">
            屠宰完成
          </Button>
        </div>
      </div>
    </div>
  );
};
export default list;
